<template>
  <div class="monitor-container">
    <img class="corner" src="../../assets/images/map/ksh42.png" alt="">
    <img class="corner" src="../../assets/images/map/ksh43.png" alt="">
    <img class="corner" src="../../assets/images/map/ksh44.png" alt="">
    <img class="corner" src="../../assets/images/map/ksh45.png" alt="">
    <img class="corner" src="../../assets/images/map/jcdsj_logo.png" alt="">
    <el-link class="monitor-container-title" href="/">
      返回主页
    </el-link>
    <b-map></b-map>
    <!--left panel-->
    <div class="left-panel">
      <input
        placeholder="输入关键字进行过滤"
        class="filter-input"
        type="search"
      />
      <ul>
        <li class="1" v-for="o in 6">{{ o }}</li>
      </ul>
    </div>
    <!--right panel-->
    <div class="right-panel">
      <div ref="info-panel" style="width: 100%;height: 250px"/>
      <ul>
        <li class="status" style="color: #1adb0b">离线{{}}</li>
        <li class="status" style="color: #26eaa8">在线{{}}</li>
        <li class="status" style="color: #e0cb09">警告{{}}</li>
        <li class="status" style="color: #af0000">故障{{}}</li>
      </ul>

    </div>
    <!--footer panel -->
    <div class="footer-panel"></div>
    <!--    button-->
    <div class="btn">
      设备状态
    </div>
  </div>
</template>

<script>

export default {
  name: 'index',
  data() {
    return {
      data: []

    };
  },
  mounted() {
    this.echartsInit();
  },
  methods: {
    //   初始化信息盘
    echartsInit() {
      let chartDom = this.$refs['info-panel'];
      let myChart = this.$echarts.init(chartDom, 'light');
      let option = {
        legend: {
          data: []
        },
        series: [

          {
            name: '',
            type: 'pie',
            radius: ['45%', '60%'],
            labelLine: {
              length: 30
            },
            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
              backgroundColor: '#F6F8FC',
              borderColor: '#8C8D8E',
              borderWidth: 1,
              borderRadius: 4,

              rich: {
                a: {
                  color: '#6E7079',
                  lineHeight: 22,
                  align: 'center'
                },
                hr: {
                  borderColor: '#8C8D8E',
                  width: '100%',
                  borderWidth: 1,
                  height: 0
                },
                b: {
                  color: '#4C5058',
                  fontSize: 14,
                  fontWeight: 'bold',
                  lineHeight: 33
                },
                per: {
                  color: '#fff',
                  backgroundColor: '#4C5058',
                  padding: [3, 4],
                  borderRadius: 4
                }
              }
            },
            data: [
              { value: 1048, name: '' }
            ]
          }
        ]
      };

      option && myChart.setOption(option);
    }
  },
  components: {
    'b-map': _ => import('@/layout/components/monitorPlus')
  }
};
</script>

<style scoped lang="scss">
$box-base-shadow: 0em 0 0.4em #01cee8,
0em 1px 0.4em #05e598,
0em 2px 0.4em #06c5f8,;
.monitor-container {
  height: 100vh;
  width: 100vw;
  background-image: url("../../assets/images/map/ksh41.png"), url("../../assets/images/map/data08.png");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;

  .corner {
    position: fixed;
    z-index: 1;

    &:nth-child(2) {
      top: 0;
      right: 0;
    }

    &:nth-child(3) {
      bottom: 0;
      right: 0;
    }

    &:nth-child(4) {
      bottom: 0;
      left: 0;
    }

    &:nth-child(5) {
      bottom: 0;
      right: 0;
    }

    &:nth-child(6) {
      bottom: 0;
      left: 0;
    }
  }

  .monitor-container-title {
    display: block;
    width: 100%;
    font-size: 3em;
    text-align: center;
    background-repeat: no-repeat;
    z-index: 10;
    position: fixed;
    color: aqua;
    background-image: url("../../assets/images/map/bg.png");
    background-size: cover;
    cursor: pointer;
    user-select: none;
  }

  .left-panel {
    position: fixed;
    min-width: 200px;
    height: 60vh;
    top: 100px;
    left: 1em;
    z-index: 1;

    .filter-input {
      background: transparent;
      outline: none;
      border: none;
      border-bottom: solid 1px snow;
      color: #f4f4f5;
      display: block;
      margin: 1em auto;
    }

    box-shadow: $box-base-shadow;

  }


  .right-panel {
    position: fixed;
    min-width: 200px;
    height: 60vh;
    top: 100px;
    z-index: 1;
    right: 1em;
    box-shadow: $box-base-shadow;

  }

  .footer-panel {
    position: fixed;
    z-index: 1;
    bottom: 0;
    width: 100%;
    height: 25vh;
    border-radius: 2em 2em 0 0;
    border: solid 2px;
    color: #20a0ff;
    box-shadow: $box-base-shadow;
  }

}
</style>
